body {
	/* 1.定义增长变量 */
	counter-reset: num1 2 num2 50 num3 1;
}

/* 品牌简介部分 Start */
.intro {
	background-image: url(../img/iab.jpg);
	width: 100%;
	height: 713px;
	padding-top: 70px;
}

.intro .container {
	display: flex;
	justify-content: space-between;
}

.intro .left {
	width: 720px;
}

.intro .left .title {
	display: flex;
	height: 43px;
	align-items: flex-end;
}

.intro .left .title h2 {
	font-size: 43px;
	font-weight: 700;
	color: rgb(38, 38, 38);
	line-height: 43px;
	margin-right: 15px;
}

.intro .left .title img {
	width: 190px;
	height: 20px;
}

.intro .left .line {
	display: block;
	width: 50px;
	height: 5px;
	background: #CC2A29;
	margin: 25px 0;
}

.intro .left .txt {
	width: 100%;
	line-height: 40px;
	font-size: 16px;
	color: rgb(38, 38, 38);
}

.intro .left .data .vertical {
	display: block;
	width: 1px;
	height: 50px;
	background: #CC2A29;
}

.intro .left .data {
	width: 100%;
	height: 86px;
	display: flex;
	align-items: center;
	text-align: center;
	margin: 64px 0px;
}

.intro .left .data h2 {
	font-size: 47px;
	font-weight: 700;
	color: #CC2A29;
	width: 178px;
	height: 55px;
}

.intro .numincre1::after {
	content: counter(num1);
}

.intro .numincre1 {
	animation: myincre1 1s linear forwards;
	/* animation-fill-mode: forwards; */
}

.intro .numincre2::after {
	content: counter(num2);
}

.intro .numincre2 {
	animation: myincre2 1s linear forwards;
	/* animation-fill-mode: forwards; */
}

.intro .numincre3::after {
	content: counter(num3);
}

.intro .numincre3 {
	animation: myincre3 1s linear forwards;
	/* animation-fill-mode: forwards; */
}

@keyframes myincre1 {
	10% {
		counter-increment: num1 10;
	}

	20% {
		counter-increment: num1 20;
	}

	30% {
		counter-increment: num1 30;
	}

	40% {
		counter-increment: num1 40;
	}

	50% {
		counter-increment: num1 50;
	}

	60% {
		counter-increment: num1 60;
	}

	70% {
		counter-increment: num1 70;
	}

	80% {
		counter-increment: num1 80;
	}

	90% {
		counter-increment: num1 90;
	}

	100% {
		counter-increment: num1 60;
	}
}

@keyframes myincre2 {
	10% {
		counter-increment: num2 1;
	}

	20% {
		counter-increment: num2 5;
	}

	30% {
		counter-increment: num2 10;
	}

	40% {
		counter-increment: num2 20;
	}

	50% {
		counter-increment: num2 25;
	}

	60% {
		counter-increment: num2 50;
	}

	70% {
		counter-increment: num2 75;
	}

	80% {
		counter-increment: num2 100;
	}

	90% {
		counter-increment: num2 125;
	}

	100% {
		counter-increment: num2 150;
	}
}

@keyframes myincre3 {
	10% {
		counter-increment: num3 1;
	}

	20% {
		counter-increment: num3 5;
	}

	30% {
		counter-increment: num3 10;
	}

	40% {
		counter-increment: num3 20;
	}

	50% {
		counter-increment: num3 25;
	}

	60% {
		counter-increment: num3 50;
	}

	70% {
		counter-increment: num3 75;
	}

	80% {
		counter-increment: num3 100;
	}

	90% {
		counter-increment: num3 125;
	}

	100% {
		counter-increment: num3 7;
	}
}

.intro .left .data sub {
	font-size: 18px;
}

.intro .left .data p {
	color: rgb(38, 38, 38);
	margin-top: 10px;
}

.intro .left .about {
	display: flex;
}

.intro .left a:hover {
	background: #CC2A29;
	border-color: #CC2A29;
	color: #FFF;
}

.intro .left a {
	color: #262626;
	border: 1px solid #CCCCCC;
	display: block;
	width: 206px;
	height: 57px;
	text-align: center;
	line-height: 57px;
	font-size: 20px;
	font-weight: 400;
	margin-right: 44px;
}

.intro .right .txt {
	width: 673px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	font-size: 20px;
	font-weight: 700;
	color: rgb(38, 38, 38);
	line-height: 50px;
	margin-top: 25px;
}

.intro .txt p:first-of-type {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.intro .txt span {
	display: inline-block;
	width: 198px;
	height: 4px;
	background: #CC2A29;
}

.intro .right img {
	width: 673px;
	height: 455px;
}

/* 品牌简介部分 End */

/* 皮蛋瘦肉粥部分 Start */
.produc {
	width: 100%;
	height: 850px;
	background-image: url(../img/ifbg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}

.produc .container {
	width: 100%;
	height: 100%;
	background-image: url(../img/ifbg3.png);
	background-size: 100% 420px;
	background-repeat: no-repeat;
	background-position: bottom;
}

.produc .container .content {
	width: 1500px;
	height: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}

.produc .content .left {
	width: 595px;
	height: 200px;
	color: white;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-self: flex-end;
	margin-bottom: 130px;
}

.produc .content .left h2 {
	width: 100%;
	font-size: 36px;
	font-weight: 700;
}

.produc .content .left span {
	width: 100%;
	display: block;
	width: 58px;
	height: 5px;
	background: #FFF;
	/* margin: 100px 0; */
}

.produc .content .left p {
	font-size: 18px;
	width: 100%;
	line-height: 35px;
}

.produc .right {
	height: 100%;
	display: flex;
	width: 550px;
	padding-bottom: 90px;
	align-items: center;
}

.produc .right .item {
	display: flex;
	flex-flow: column;
}

.produc .right .item:first-of-type a {
	border-right: none;
}

.produc .right .item>a+a {
	border-top: none;
}

.produc .right .item:last-of-type a {
	border-left: none;
}

.produc .content .right a {
	font-size: 20px;
	font-weight: 700;
	color: white;
	width: 158px;
	height: 100px;
	display: block;
	border: 1px solid #F2EBDC;
	text-align: center;
	line-height: 100px;
}

/* 皮蛋瘦肉粥部分 End */

/* 人气爆满部分 Start */
.popular {
	width: 100%;
	height: 700px;
	position: relative;
}

@keyframes mask {
	0% {
		-webkit-mask-position-x: 0;
	}

	100% {
		-webkit-mask-position-x: 100vw;
	}
}

.popular .container {
	-webkit-mask-image: url(../img/popular.png);
	background-color: white;
	-webkit-mask-size: 100% 100%;
	-webkit-mask-repeat: repeat;
	top: 0px;
	height: 100%;
	position: absolute;
	height: calc(100% + 190px);
	left: 0;
	top: 0;
	width: 100%;
	margin-top: -90px;
	animation: mask linear 5s infinite;
	z-index: 100;
}

.popular .content {
	width: 1500px;
	height: 100%;
	/* 	padding-top: 200px; */
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.popular .content .left {
	width: 336px;
	height: 565px;
}

.popular .content .left h2 {
	font-size: 43px;
	font-weight: 700;
	color: rgb(38, 38, 38);
	line-height: 43px;
	margin-right: 15px;
}

.popular .content .left img {
	width: 225px;
	height: 23px;
	margin: 70px 0px;
}

.popular span {
	font-size: 32px;
}

.popular .content .left .line {
	display: block;
	width: 50px;
	height: 5px;
	background: #CC2A29;
	margin: 25px 0;
}

.popular .content .left p {
	width: 100%;
	line-height: 30px;
	font-size: 16px;
	color: rgb(38, 38, 38);
	letter-spacing: 1px;
}

.popular .content .left .more {
	width: 100%;
	display: flex;
	justify-content: space-around;
}

.popular .content .left a:hover {
	background: #CC2A29;
	border-color: #CC2A29;
	color: #FFF;
}

.popular .content .left a {
	color: #CCCCCC;
	border: 1px solid #CCCCCC;
	display: inline-block;
	padding: 0px 25px;
	height: 57px;
	text-align: center;
	line-height: 57px;
	font-size: 20px;
	font-weight: 400;
}

.popular .content .right {
	/* align-self: flex-end; */
	width: 1200px;
	height: 550px;
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	/* align-self: baseline; */
	position: relative;
}

.popular .content .right .kind input {
	display: none;
}

.popular .content .right .kind input:checked+label {
	background: #CC2A29;
	border-color: #CC2A29;
	color: #FFF;
}

.popular .content .right .kind label {
	color: #262626;
	border: 1px solid #CCCCCC;
	display: inline-block;
	padding: 0px 40px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	font-size: 20px;
	font-weight: 400;
	margin-left: 25px;
}

.popular .right .kind input:first-of-type:checked~.data,
.popular .right .kind input:nth-of-type(2):checked~.hot {
	display: flex;
}

.popular .right .kind .data,
.popular .right .kind .hot {
	width: 100%;
	height: 450px;
	position: absolute;
	left: 0;
	display: flex;
	justify-content: flex-end;
	margin-top: 40px;
	display: none;
}

.popular .right .kind img {
	width: 21%;
	margin-left: 15px;
}

/* 人气爆满部分 End */

/* 优秀加盟商 Start */
.join {
	width: 100%;
	height: 1011px;
	background-image: url(../img/igibg.jpg);
	z-index: 50;
	margin-top: -130px;
	padding-top: 230px;
}

.join .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 50px;
}

.join .left {
	width: 892px;
	height: 505px;
	position: relative;
}

.join .left .container {
	width: 892px;
	height: 396px;
	overflow: hidden;
	position: relative;
	/* margin: 0 auto; */
}

.join .left .swiper {
	width: 1500px;
	position: absolute;
	left: -310px;
	height: 396px;
	/* margin: 0px -20px; */
}

.join .left .swiper-slide {
	/* width: 555px !important; */
	height: 396px !important;
	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}

/* .join .left .swiper-slide-active{
	width: 555px !important;
} */
.join .left .swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.join .left .swiper-button-prev {
	top: 95%;
	left: 25%;
	border: 1px solid white;
	width: 110px;
	height: 60px;
}

.join .left .swiper-button-prev:hover,
.join .left .swiper-button-next:hover,
.join .left .more:hover {
	background: #CC2A29;
	border-color: #CC2A29;
}

@font-face {
	font-family: 'iconfont';
	src: url('../iconfont/iconfont.ttf') format('truetype');
}

.join .left .swiper-button-prev::after,
.join .left .swiper-button-next::after {
	display: none;
}

.join .iconfont {
	font-family: "iconfont" !important;
	font-size: 46px;
	font-style: normal;
	color: white;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.join .left .more {
	width: 208px;
	height: 60px;
	color: white;
	border: 1px solid white;
	position: absolute;
	text-align: center;
	line-height: 60px;
	bottom: -12px;
	left: 343px;
}

.join .left .swiper-button-next {
	top: 95%;
	right: 25%;
	border: 1px solid white;
	width: 110px;
	height: 60px;
}

.join .right {
	width: 495px;
	color: white;
	height: 538px;
	display: flex;
	flex-direction: column;
	font-size: 14px;
	justify-content: space-around;
	/* margin-top: -20px; */
}

.join .container .right h2 {
	font-size: 43px;
	font-weight: 700;
}

.join .right .data {
	width: 100%x;
	height: 283px;
	display: flex;
	flex-flow: wrap column;
	justify-content: space-around;
}

.join .right .items {
	display: flex;
	width: 100%;
}

.join .right .item {
	width: 247px;
	height: 98px;
}

.join .right .item h2 {
	font-size: 16px;
	padding-bottom: 10px;
}

.join .right .item p {
	font-size: 49px;
	height: 500;
}

.join .right a {
	display: block;
	width: 354px;
	height: 57px;
	border: 1px solid white;
	text-align: center;
	line-height: 57px;
	font-size: 18px;
}

.join .right a:hover {
	background: #CC2A29;
	border-color: #CC2A29;
}

/* 优秀加盟商 End */

/* 经营模式 Start */
.mode {
	width: 100%;
	background-color: white;
	height: 535px;
}

.mode-box {
	width: 1500px;
	margin: 0 auto;
	position: relative;
}

.mode .container {
	width: 1500px;
	padding: 30px;
	height: 535px;
	position: absolute;
	top: -120px;
	/* margin: 0 auto; */
	background-color: white;
	z-index: 120;
}

.mode .container .content {
	width: 100%;
	height: 100%;
	display: flex;
	flex-flow: wrap;
}

.mode .content .item {
	width: 360px;
	height: 238px;
	border: 1px solid rgb(233, 233, 233);
	text-align: center;
	color: rgb(38, 38, 38);
	font-size: 16px;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: space-around;
	padding-top: 24px;
	position: relative;
}

.mode .content .item img {
	width: 69px;
	height: 69px;
}

.mode .content .item p {
	width: 242px;
	line-height: 33px;
}

.mode .content .item+.item {
	border-left: none;
}

.mode .content .item:nth-of-type(5) {
	border-left: 1px solid rgb(233, 233, 233);
}

.mode .content .item:nth-of-type(5),
.mode .content .item:nth-of-type(6),
.mode .content .item:nth-of-type(7),
.mode .content .item:nth-of-type(8) {
	border-top: none;
}

.mode .content .item:hover {
	background: #CC2A29;
	border-color: #CC2A29;
	color: white;
}

.mode .content .item:hover .image {
	display: block;
}

.mode .content .item .image {
	width: 69px;
	height: 69px;
	display: none;
	position: absolute;
	top: 44px;
}

/* 经营模式 End */

/* 加盟动态部分 Start */
.trends {
	width: 100%;
	height: 673px;
	background-image: url(../img/idb.jpg);
}

.trends .container {
	display: flex;
	padding: 89px 0px;
	justify-content: space-between;
}

.trends .left {
	width: 812px;
	height: 490px;
	display: flex;
	flex-flow: column wrap;
	justify-content: space-around;
}

.trends .left h2 {
	font-size: 43px;
	font-weight: 700;
	color: rgb(38, 38, 38);
	line-height: 43px;
	margin-right: 15px;
}

.trends .leftt img {
	width: 225px;
	height: 23px;
	margin: 70px 0px;
}

.trends .left .line {
	display: block;
	width: 50px;
	height: 5px;
	background: #CC2A29;
	margin: 10px 0;
}

.trends .left p {
	width: 100%;
	line-height: 30px;
	font-size: 16px;
	color: rgb(38, 38, 38);
	letter-spacing: 1px;
}

.trends .left .image {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.trends .left .image .item {
	width: 257px;
	height: 257px;
	font-size: 0;
	position: relative;
}

.trends .left .image .item img {
	height: 198px;
}

.trends .left .image .item .mask-box {
	position: absolute;
	width: 100%;
	height: 198px;
	top: 0;
	left: 0;
	opacity: 0;
	transition-duration: .3s;
	background: #000;
}

.trends .left .item:hover {
	box-shadow: 0 0 10px 0 rgb(0 0 0 / 50%);
}

.trends .left .item:hover .mask-box {
	opacity: .5;
}

.trends .left .item:hover a {
	background: #CC2A29;
	color: #FFF;
}

.trends .left a {
	color: rgb(38, 38, 38);
	width: 257px;
	background-color: white;
	display: inline-block;
	height: 59px;
	text-align: center;
	line-height: 57px;
	font-size: 16px;
	font-weight: 400;
}

.trends .right {
	width: 624px;
	height: 494px;
}

.trends .right .content {
	width: 100%;
	height: 372px;
	display: flex;
	flex-flow: column;
	justify-content: space-between;
}

.trends .right .content a {
	display: flex;
	width: 100%;
	height: 114px;
	background-color: white;
}

.trends .date {
	width: 119px;
	height: 114px;
	border-right: 1px solid rgb(240, 240, 240);
}

.trends .date h2,
.trends .txt h2 {
	font-size: 18px;
	color: rgb(51, 51, 51);
	font-weight: 700;
}

.trends .date h3 {
	font-size: 14px;
	color: rgb(153, 153, 153);
}

.trends .date .month {
	height: 80px;
	width: 100%;
	display: flex;
	padding-top: 10px;
	justify-content: space-evenly;
	flex-flow: column;
	align-items: center;
}

.trends .date .year {
	height: 39px;
	width: 100%;
	line-height: 39px;
	text-align: center;
	border-top: 1px solid rgb(240, 240, 240);
}

.trends .txt {
	width: 465px;
	margin-left: 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
}

.trends .txt p {
	font-size: 14px;
	color: rgb(102, 102, 102);
	margin-top: -20px;
}

.trends .more {
	width: 354px;
	height: 57px;
	line-height: 57px;
	font-size: 18px;
	text-align: center;
	border: 1px solid rgb(204, 204, 204);
	color: rgb(38, 38, 38);
	margin-top: 60px;
}

.trends .content a:hover {
	background: #CC2A29;
	box-shadow: 0 0 10px 0 rgb(0 0 0 / 50%);
}

.trends .content a:hover h2 {
	color: white;
}

.trends .content a:hover h3,
.trends .right a:hover p {
	color: #E5B8B7;
	border-color: #E5B8B7;
}

.trends .right .more:hover {
	background: #CC2A29;
	color: #FFF;
	border-color: #CC2A29;
}

/* 加盟动态部分 End */

/* 资询留言部分 Start */
.message {
	width: 100%;
	height: 680px;
	background-image: url(../img/iformbg.jpg);
	padding-top: 90px;
}

.message .container {
	display: flex;
	justify-content: space-between;
}

.message .left {
	width: 594px;
	display: flex;
	flex-flow: column;
	justify-content: space-around;
}

.message .left .title {
	display: flex;
}

.message .left .title h2 {
	font-size: 43px;
	font-weight: 700;
	color: rgb(38, 38, 38);
}

.message .left .title h3 {
	font-size: 24px;
	font-weight: 700;
	color: rgb(38, 38, 38);
}

.message .left .title .txt {
	display: flex;
	justify-content: space-around;
	flex-direction: column;
}

.message .left p,
.message .left h3 {
	font-size: 20px;
	color: rgb(64, 64, 64);
}

.message .left h4 {
	font-size: 59px;
	font-weight: 700;
	color: rgb(23, 58, 140);
}

.message .left h5 {
	font-size: 16px;
	font-weight: 500;
	color: rgb(64, 64, 64);
}

.message .left img {
	width: 270px;
	height: 112px;
}

.message .right {
	width: 753px;
	height: 409px;
}

.message .right form {
	display: flex;
	justify-content: space-between;
}

.message .right .info {
	width: 535px;
	height: 315px;
	/* border: 1px solid black; */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.message .right .info input {
	border: 1px solid #E6E6E6;
	width: 100%;
	height: 57px;
	padding-left: 15px;
	font-size: 14px
}

.message .right .info textarea {
	width: 100%;
	height: 156px;
	border: 1px solid #E6E6E6;
	padding: 15px;
}

.message .right .quick {
	width: 196px;
	height: 315px;
	border: 1px solid #E6E6E6;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	padding-left: 10px;
	padding-top: 15px;
}

.message .right .quick h2 {
	font-size: 18px;
	font-weight: bolder;
	color: #262626;
}

.message .right .quick span {
	display: inline-block;
	width: 20px;
	height: 4px;
	background: #CC2A29;
}

.message .right .quick .circle {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #CC2A29;
	margin-right: 10px;
}

.message .right .item {
	height: 19px;
}

.message .right a {
	display: inline-block;
	font-size: 14px;
	color: rgb(102, 102, 102);
	line-height: 19px;
}

.message .right [type="submit"] {
	display: block;
	width: 752px;
	height: 59px;
	text-align: center;
	line-height: 59px;
	font-size: 20px;
	font-weight: 400;
	color: #FFFFFF;
	border: none;
	background: #CC2A29;
	margin-top: 20px;
}

/* 资询留言部分 End */